<template>
  <div class="interview">
    <!-- 头部导航栏 -->
    <div class="topnav">
      <van-nav-bar
        title="面试题"
        right-text="答题卡"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #left>
          <i class="iconfont iconbtn_nav_back"></i>
        </template>
      </van-nav-bar>
    </div>
    <!-- 答题区域 -->
    <div class="test">
      <div class="test_title">
        <div>
          <span
            >【{{
              questionList.type === 1
                ? '单选'
                : questionList.type === 2
                ? '多选'
                : '简答题'
            }}】</span
          >{{ questionList.title }}
        </div>
      </div>
      <div class="test_tag">
        <span v-for="(item, index) in questionList.tag" :key="index">
          {{ item }}
        </span>
      </div>
      <div class="test_option">
        <div class="choose" v-if="questionList.type !== 3">
          <div
            class="item"
            v-for="(item, index) in questionList.option"
            :key="index"
            style="height=50px"
          >
            <div
              @click="onChoose(index)"
              :class="{
                select:
                  idAccomplish === false && active.includes(optiontitle[index]),
                right:
                  idAccomplish === true &&
                  testanswer.includes(optiontitle[index]),
                err: idAccomplish === true && error.includes(optiontitle[index])
              }"
            >
              {{ optiontitle[index] }}. {{ item }}
              <i
                class="iconfont"
                :class="{
                  iconicon_zhengque:
                    idAccomplish === true &&
                    testanswer.includes(optiontitle[index]),
                  iconicon_cuowu:
                    idAccomplish === true && error.includes(optiontitle[index])
                }"
              ></i>
            </div>
          </div>
        </div>
        <div class="Short-answer" v-else>
          <van-field
            v-model="value"
            type="textarea"
            placeholder="请输入你的答案"
            input-align="left"
          />
        </div>
      </div>
      <div class="test_answer" v-if="idAccomplish">
        <h3 class="answer_title">答案解析</h3>
        <div class="answers">
          正确答案:<span v-for="(item, index) in testanswer" :key="index">{{
            item
          }}</span>
        </div>
        <div class="test_difficulty">
          <span
            >难度：{{
              questionList.difficulty === 1
                ? '简单'
                : questionList.difficulty === 2
                ? '中等'
                : '困难'
            }}</span
          >
          <span>提交次数：18</span>
          <span>正确次数：5</span>
        </div>
        <div class="analysis">
          {{ textParse }}
        </div>
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="bottom">
      <!-- 底部导航栏 -->
      <div class="bottombav">
        <div class="icon">
          <div
            class="item"
            @click="collectTset"
            :class="{ collect: collectList.includes(testId) }"
          >
            <i class="iconfont iconbtn_shoucang_sel"></i>
            <div>收藏</div>
          </div>
          <div class="item" @click="feedback">
            <i class="iconfont iconbtn_shuati_fankui"></i>
            <div>反馈</div>
          </div>
        </div>
        <div>
          <span style="font-size:20px; color:#d12d3e">{{ index + 1 }}</span>
          <span>/{{ testNum }}</span>
        </div>
        <div class="btn">
          <van-button
            v-if="idAccomplish === false && testisTrueList.length !== testNum"
            type="info"
            @click="submit"
            :disabled="isDisable"
            >提交</van-button
          >
          <van-button
            v-if="idAccomplish && testisTrueList.length !== testNum"
            type="info"
            @click="nextQuestion"
            >下一题</van-button
          >
          <van-button
            v-if="idAccomplish && testisTrueList.length === testNum"
            type="info"
            @click="finish"
            >结束</van-button
          >
        </div>
      </div>
    </div>
    <com
      ref="com"
      :testNum="testNum"
      :index="index"
      :testisTrueList="testisTrueList"
      @chooseTset="chooseTset"
    ></com>
    <feedback ref="feedback" :testId="testId"></feedback>
  </div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import com from './com/com'
import {
  interviewQuestions,
  submitQuestion,
  questionDetail,
  collectQuestion
} from '../../api/api.js'
import feedback from './com/feedback'
export default {
  components: {
    com,
    feedback
  },
  computed: {
    isDisable () {
      // 按钮禁用
      if (this.questionList.type === 3) {
        if (this.value.length === 0) {
          return true
        } else {
          return false
        }
      } else {
        if (this.active.length === 0) {
          return true
        } else {
          return false
        }
      }
    }
  },
  data () {
    return {
      city: this.$route.params.city, // 城市
      typeId: this.$route.params.typeId, // 试题类型
      testNum: 0, // 试题数量
      allQuestion: [], // 所有试题
      questionList: [], // 试题详情
      index: 0, // 试题列表下标
      optiontitle: {
        0: 'A',
        1: 'B',
        2: 'C',
        3: 'D'
      },
      active: [], // 用户选择题选择的答案
      testId: 0, // 试题id
      testanswer: [], // 试题答案
      textParse: '', //  答案解析
      error: [], // 错题选项
      idAccomplish: false, // 试题状态 true：完成 and false 未完成
      testisTrueList: [], // 试题结果
      testType: false, // 试题结果状态 true or false
      collectList: [], // 试题收藏列表
      value: '' // 简答题答案
    }
  },
  created () {
    // 获取试题数据
    this.getTestList()
  },
  methods: {
    onClickLeft () {
      this.$dialog
        .confirm({
          title: '确认退出？',
          message: '下次重新开始刷题哦'
        })
        .then(() => {
          this.$router.go(-1)
        })
        .catch(() => {
          // on cancel
        })
    },
    // 打开答题卡界面
    onClickRight () {
      this.$refs.com.show = true
    },
    // 封装获取模拟试题请求
    async getTestList () {
      const res = await interviewQuestions({
        type: this.typeId,
        city: this.city
      })
      // console.log(res)
      // 获取试题数量
      this.testNum = res.data.data.length
      this.allQuestion = res.data.data
      this.questionList = res.data.data[this.index].detail
      // 存储试题id
      this.testId = res.data.data[this.index].id
    },
    onChoose (index) {
      // 当题目为单选题的时候
      if (this.questionList.type === 1) {
        // 清除上一次点击的答案
        this.active = []
        this.active.push(this.optiontitle[index])
      } else if (this.questionList.type === 2) {
        // 当题目为多选题的时候,判断数组里面是否有点击的答案
        if (this.active.indexOf(this.optiontitle[index]) === -1) {
          // 没有的话进行添加
          this.active.push(this.optiontitle[index])
        } else {
          // 获取点击答案的下标
          var s = this.active.indexOf(this.optiontitle[index])
          // 删除下标
          this.active.splice(s, 1)
        }
      }
    },
    async submit () {
      var res = null
      // 提交单选题 判断单选多选
      if (this.questionList.type === 1) {
        res = await submitQuestion({
          id: this.testId,
          singleAnswer: this.active[0]
        })
        // console.log(res)
        this.testanswer = [res.data.data.singleAnswer]
      } else {
        res = await submitQuestion({
          id: this.testId,
          singleAnswer: this.active
        })
        this.testanswer = res.data.data.multipleAnswer
      }
      console.log(res)
      this.textParse = res.data.data.answerAnalysis
      this.idAccomplish = true
      // 判断选择是否正确
      if (this.active.length !== this.testanswer.length) {
        this.testType = false
      } else {
        this.active.forEach(item => {
          if (this.testanswer.indexOf(item) === -1) {
            this.testType = false
          } else {
            this.testType = true
          }
        })
      }
      // 获取错误的选择
      this.error = this.active.filter(item => {
        return this.testanswer.indexOf(item) === -1
      })
      // 在数组指定的位置保存答题的数据
      this.testisTrueList[this.index] = {
        id: this.testId, // 试题id
        err: this.testType, // 试题结果状态 true or false
        errTest: this.error, // 错误选项
        testindex: this.index, // 当前试题下标
        testanswer: this.testanswer, // 正确答案
        active: this.active, // 用户选的的选项
        questionList: this.questionList // 试题详情列表
      }
      console.log(this.testisTrueList)
      // 判断是否答完
      if (this.testisTrueList.length === this.testNum) {
        this.$toast('答完啦')
      }
    },
    // 下一题
    async nextQuestion () {
      // 清除上一题样式
      this.active = []
      this.testanswer = []
      this.error = []
      this.idAccomplish = false
      this.index++
      this.questionList = []
      // 获取下一题
      this.getTestdetail()
    },
    // 封装获取试题详情请求
    async getTestdetail () {
      this.testId = this.allQuestion[this.index].id
      const res = await questionDetail(this.testId)
      // console.log(res)
      this.questionList = res.data.data
      console.log(this.questionList)
    },
    chooseTset (subindex) {
      if (this.testisTrueList[subindex]) {
        // 获取试题内容
        this.active = []
        this.testanswer = this.testisTrueList[subindex].testanswer
        this.error = this.testisTrueList[subindex].errTest
        this.idAccomplish = true
        this.index = subindex
        this.questionList = this.testisTrueList[subindex].questionList
        this.testId = this.testisTrueList[subindex].id
      } else {
        this.active = []
        this.index = subindex
        this.idAccomplish = false
        this.getTestdetail()
      }
    },
    // 收藏面试题
    async collectTset () {
      const res = await collectQuestion({ id: this.testId })
      console.log(res)
      this.collectList = res.data.data
    },
    // 反馈试题
    async feedback () {
      this.$refs.feedback.show = true
      this.$refs.feedback.value = ''
    },
    // 结束弹框
    finish () {
      this.$dialog
        .alert({
          title: '提示',
          message: '答完啦，你真棒'
        })
        .then(() => {
          // on close
          this.$router.push('/question')
        })
    }
  }
}
</script>

<style lang="less">
.interview {
  font-size: 15px;
  padding-bottom: 66px;
  .topnav {
    i {
      font-size: 45px;
    }
    .van-nav-bar__text {
      color: #000;
    }
  }
  .test {
    padding: 35px 20px 20px 20px;
    .test_title {
      font-size: 16px;
      text-align: justify;
    }
    .test_tag {
      font-size: 14px;
      margin-top: 15px;
      color: #b4b4bd;
      padding-left: 10px;
      span {
        margin-right: 10px;
      }
    }
    .test_option {
      margin-top: 30px;
      .choose {
        .item {
          height: 50x;
          div {
            display: flex;
            justify-content:space-between;
            margin-bottom: 20px;
            font-size: 15px;
            padding: 15px 15px;
          }
          i {
            font-size: 18px;
          }
          .select {
            border: 1px solid #ccc;
            border-radius: 5px;
          }
          .right {
            border: none;
            background: #ddfad9;
            border-color: transparent;
            color: #1dc779;
          }
          .err {
            border: none;
            background: pink;
            border-color: transparent;
          }
        }
      }
    }
    .test_answer {
      margin-top: 50px;
      .answer_title {
        font-size: 17px;
      }
      .answers {
        margin-top: 17px;
        color: #1dc779;
      }
      .test_difficulty {
        margin-top: 26px;
        font-size: 12px;
        padding-left: 10px;
        display: flex;
        span {
          flex: 1;
          color: #545671;
          text-align: left;
        }
      }
      .analysis {
        margin-top: 28px;
        text-align: justify;
        color: #181a39;
      }
    }
  }
  .bottom {
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
    // z-index: 100;
    background-color: #fff;
    .bottombav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 10px 20px 10px;
      .item {
        margin-right: 20px;
      }
      .icon {
        display: flex;
        color: #b4b4bd;
        line-height: 15px;
        i {
          font-size: 28px;
        }
      }
      .collect {
        color: #e40137 !important;
      }
      .van-button--normal {
        border-radius: 5px;
        height: 36px;
        width: 90px;
      }
    }
  }
}
</style>
